<script setup>
import {
  ref,
  reactive,
  onMounted,
} from "vue";

import * as echarts from "echarts";

import api from "@/api";
import moment from "moment";

import dayIcon from "@/assets/images/workSurface/daytotal.png";
import realIcon from "@/assets/images/workSurface/realtotal.png";


const tabs = reactive([
  {
    label: "今日作业面总人数",
    value: "0",
    icon: dayIcon,
    unit: "",
  },
  {
    label: "实时作业面总人数",
    value: "0",
    icon: realIcon,
    unit: "",
  },
]);

const form = ref({
  startDate: "",
  endDate: "",
});
const times = ref([
  // moment().subtract(1, "weeks").format("YYYY-MM-DD"),
  // moment().format("YYYY-MM-DD"),
  "2024-03-03",
  "2024-03-03"
]);

const dateChangeHandleClick = function (date) {
  if (date === null) {
    form.startDate = "";
    form.endDate = "";
  } else {
    form.startDate = moment(date[0]).format("YYYY-MM-DD");
    form.endDate = moment(date[1]).format("YYYY-MM-DD");
  }
};

//搜索
const onSubmit = async function () {
  let startDate = moment(times.value[0]).format('YYYY-MM-DD')
  let endDate = moment(times.value[1]).format('YYYY-MM-DD')
  let result = await api.person.getWorkingAreaPersonNumData({
    startDate: startDate,
    endDate: endDate
  })
  if (result && result.data.length != 0) {
    tableData.value = []
    let data = result.data
    let statisticUrl = result.statisticUrl
    tabs[0].value = data.totalPplCount
    tabs[1].value = data.realTimePplCount
    let dataList = data.data.reverse()
    let xData = []
    let yData = []
    for (let k = 0; k < dataList.length; k++) {
      let tempTableData = []
      let date = dataList[k].date
      let countDataList = dataList[k].dailyNumCount

      // let timelyCountList = countDataList[0]
      for (let i = 0; i < countDataList.length; i++) {
        if (k == 0 && i == 0) {
          for (let j = 0; j < countDataList[0].timeSeriesData.length; j++) {
            xData.push(countDataList[0].timeSeriesData[j].hour)
          }
        }
        let yDataObj = {}
        let yDataObjList = []
        if (k == 0) {
          yDataObj.name = countDataList[i].deviceInfo
        }

        for (let j = 0; j < countDataList[i].timeSeriesData.length; j++) {
          if (k == 0) {
            yDataObjList.push(countDataList[i].timeSeriesData[j].pplMax)
          }
          let tabledata = {}
          tabledata.date = date + "  " + countDataList[i].timeSeriesData[j].hour + "h"
          tabledata.imgUrl = statisticUrl + countDataList[i].timeSeriesData[j].imgUrl
          tabledata.num = countDataList[i].timeSeriesData[j].pplMax
          tabledata.workSurface = countDataList[i].deviceInfo
          tempTableData.push(tabledata)
          // tableData.value.push(tabledata)
        }
        if (k == 0) {
          yDataObj.value = yDataObjList
          yData.push(yDataObj)
        }
      }
      tempTableData = tempTableData.reverse()
      for (let i = 0; i < tempTableData.length; i++) {
        tableData.value.push(tempTableData[i])
      }
    }
    // tableData.value.reverse()
    console.log(tableData.value)
    populationAnalysis.xData = xData
    populationAnalysis.yData = yData
    peoplecount.value[0].num = tableData.value[0].num
    peoplecount.value[0].imgUrl = tableData.value[0].imgUrl
    peoplecount.value[0].label = tableData.value[0].workSurface
    peoplecount.value[0].time = tableData.value[0].date
    console.log(result)
  }

};

//重置
const onReset = function () { };

const peoplecount = ref([
  {
    label: "--",
    imgUrl: "",
    time: "--",
    num: "--",
  },
]);

//右侧内容
const echartRef = ref(null);
let echartObj = null;
const populationAnalysis = reactive({
  xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  yData: [
    {
      name: "作业面一",
      value: [12, 34, 14, 5, 31, 41, 53, 12, 21, 31],
    },
  ],
});

const colors = ["#FF4040", "#C740FF", "#5540FF", "#00A1FF", "#00FFAD", "#6EFF00", "#FFB100"];
const setEcharts = function () {
  const series = [];
  console.log(populationAnalysis)
  populationAnalysis.yData.forEach((item, index) => {
    series.push({
      name: item.name,
      data: item.value,
      type: "line",
      barWidth: 25,
      smooth: true,
      symbol: "none",
      lineStyle: {
        normal: {
          width: 5,
          color: {
            type: "linear",
            colorStops: [
              {
                offset: 0,
                color: colors[index], // 0% 处的颜色
              },
              {
                offset: 1,
                color: colors[index] + "90", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: colors[index] + "90",
          shadowBlur: 5,
          shadowOffsetY: 10,
        },
      },
      itemStyle: {
        normal: {
          color: colors[index],
          borderWidth: 10,
        },
      },
    });
  });

  echartObj = echarts.init(echartRef.value);
  let option = {
    grid: {
      x: 40,
      y: 30,
      x2: 20,
      y2: 40,
    },
    legend: {
      textStyle: {
        color: "#666",
        fontSize: 12,
        fontFamily: "SourceHanSansSC",
      },
      itemGap: 20,
      itemWidth: 10,
      itemHeight: 5,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: populationAnalysis.xData,
      axisLabel: {
        interval: 0,
        color: "#5D605F",
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
        lineStyle: {
          color: "#939393 ",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：人/小时",
      nameLocation: "end",
      nameTextStyle: {
        padding: [0, 0, 0, -10],
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        color: "#5D605F",
        fontFamily: "SourceHanSansSC",
      },
      axisLine: {
        show: true, //不显示坐标轴线
        lineStyle: {
          color: "#939393 ",
        },
      },
      splitLine: {
        //网格线
        show: true,
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: series,
  };
  echartObj.setOption(option);
};

const timesel = [
  // {
  //     label: "月",
  //     value: "month",
  // },
  // {
  //     label: "周",
  //     value: "week",
  // },
  {
    label: "日",
    value: "day",
  },
];

const timeSelActive = ref(0);

const timeSelHandleClick = function (item, index) {
  if (timeSelActive.value === index) return;
  timeSelActive.value = index;
};

let initPage = async () => {
  let now = moment().format('YYYY-MM-DD')
  now = "2024-03-03"
  let data = await api.person.getWorkingAreaPersonNumData({
    startDate: now,
    endDate: now
  })
  console.log(data)
  // console.log(data.data)
  console.log(data.data.data.length)
  if (data.data.data.length != 0) {
    let dataList = data.data
    let statisticUrl = data.statisticUrl
    tabs[0].value = dataList.totalPplCount
    tabs[1].value = dataList.realTimePplCount
    let date = dataList.data[0].date
    let countDataList = dataList.data[0].dailyNumCount
    let xData = []
    let yData = []
    // let timelyCountList = countDataList[0]
    for (let i = 0; i < countDataList.length; i++) {
      if (i == 0) {
        for (let j = 0; j < countDataList[0].timeSeriesData.length; j++) {
          xData.push(countDataList[0].timeSeriesData[j].hour)
        }
      }
      let yDataObj = {}
      let yDataObjList = []
      yDataObj.name = countDataList[i].deviceInfo
      for (let j = 0; j < countDataList[i].timeSeriesData.length; j++) {
        yDataObjList.push(countDataList[i].timeSeriesData[j].pplMax)
        let tabledata = {}
        tabledata.date = "2024-03-03" + "  " + countDataList[i].timeSeriesData[j].hour + "h"
        tabledata.imgUrl = statisticUrl + countDataList[i].timeSeriesData[j].imgUrl
        tabledata.num = countDataList[i].timeSeriesData[j].pplMax
        tabledata.workSurface = countDataList[i].deviceInfo
        tableData.value.push(tabledata)
      }
      yDataObj.value = yDataObjList
      yData.push(yDataObj)
    }
    tableData.value.reverse()

    populationAnalysis.xData = xData
    console.log(populationAnalysis.xData)
    populationAnalysis.yData = yData
    peoplecount.value[0].num = tableData.value[29].num
    peoplecount.value[0].imgUrl = tableData.value[29].imgUrl
    peoplecount.value[0].label = tableData.value[29].workSurface
    peoplecount.value[0].time = tableData.value[29].date
  }
}


let handleRowClick = (row) => {
  console.log(row)
  peoplecount.value[0].num = row.num
  peoplecount.value[0].imgUrl = row.imgUrl
  peoplecount.value[0].label = row.workSurface
  peoplecount.value[0].time = row.date
}

onMounted(async () => {
  await initPage()
  setEcharts();
  window.onresize = _.debounce(() => {
    echartObj && echartObj.resize();
  }, 300);
});

const tableData = ref([]);
</script>

<template>
  <div class="container">
    <div class="tabs">
      <div class="tab-item" v-for="(item, index) in tabs" :key="index">
        <img :src="item.icon" />
        <div class="desc">
          <span class="label">{{ item.label }}</span>
          <span class="value">{{ item.value }} <font class="unit">{{ item.unit }}</font></span>
        </div>
      </div>
    </div>

    <div class="ws-container">


      <div class="rsider">
        <div class="title">
          <span>人数分析</span>
        </div>
        <div class="timesel">
          <div class="timesel-item" :class="timeSelActive === index ? 'active' : ''" v-for="(item, index) in timesel"
            :key="index" @click="timeSelHandleClick(item, index)">
            <span>{{ item.label }}</span>
          </div>
        </div>
        <div class="echart" ref="echartRef"></div>
        <el-table :data="tableData" style="width: 100%; height: calc(100vh - 600px)" @row-click="handleRowClick">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="date" label="日期" align="center" />
          <el-table-column prop="workSurface" label="作业面" align="center" />
          <el-table-column prop="num" label="工作量（人/天）" align="center" />
        </el-table>
      </div>

      <div class="lsider">
        <div class="toolbar">
          <el-form :model="form" label-width="70px">
            <el-form-item label="识别标识" style="width: 220px">
              <el-select size="small" v-model="form.mark" placeholder="请选择">
                <el-option v-for="item in typeOpts" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="起止时间" style="width: 400px">
              <el-date-picker size="small" v-model="times" type="daterange" range-separator="一" start-placeholder="开始时间"
                end-placeholder="结束时间" @change="dateChangeHandleClick" />
            </el-form-item>

            <el-form-item class="btns">
              <el-button size="small" type="primary" color="#8F93F7" style="color: #ffffff"
                @click="onSubmit">搜索</el-button>
              <el-button color="#9A9A9A" size="small" type="primary" @click="onReset"
                style="color: #ffffff">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="peopleCount">
          <div class="title">
            <span>人数统计</span>
          </div>
          <div class="content">
            <el-carousel :interval="3000" indicator-position="outside" height="600px">
              <el-carousel-item v-for="(item, index) in peoplecount" :key="index">
                <el-image crossorigin="anonymous" style="width: 100%; height: 500px" :src="item.imgUrl" fit="fill" />
                <div class="item-info">
                  <div class="label">
                    <span class="name">作业面：</span>
                    <span class="value">{{ item.label }}</span>
                  </div>
                  <div class="time">
                    <span class="name">时间：</span>
                    <span class="value">{{ item.time }}</span>
                  </div>
                  <div class="num">
                    <span class="name">识别人数：</span>
                    <span class="value">{{ item.num }}</span>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>

            <div class="setArea">
              <el-button color="#8F93F7" size="small" type="primary" @click="onReset"
                style="color: #ffffff">识别区域设置</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  font-family: SourceHanSansSC;
  display: flex;
  color: #656565;
  flex-direction: column;

  .tabs {
    width: 70%;
    height: 70px;
    display: flex;
    // justify-content: space-between;
    color: #ffffff;
    margin-top: 10px;

    .tab-item {
      width: 33.3%;
      height: 70px;
      border-radius: 8px;
      cursor: pointer;

      img {
        width: 47px;
        height: 47px;
        float: left;
        margin: 5px 20px 0px 20px;
      }

      .desc {
        width: 60%;
        height: 54px;
        float: left;
        line-height: 54px;
        background: #ffffff;
        border-radius: 5px;
        border: 1px solid #dce3ef;
        color: #4471fb;
        text-indent: 20px;

        .label {
          font-size: 14px;
          font-weight: bold;
        }

        .unit {
          font-size: 12px;
          color: #555555;
        }
      }

      .value {
        float: right;
        margin-right: 20px;
        line-height: 56px;
        font-size: 30px;
        font-weight: bold;
      }

      &.active {
        background: linear-gradient(0deg, #ea8d13, #f6c01b);
      }
    }
  }

  .ws-container {
    display: flex;
    flex-direction: row;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    height: calc(100vh - 165px);
    overflow-y: auto;
    overflow-x: hidden;

    .title {
      width: 200px;
      height: 20px;
      border-left: 3px #8f93f7 solid;
      font-weight: bold;
      padding-left: 10px;
      margin: 7px 30px 10px 5px;
    }

    .rsider {
      width: calc(100% - 950px);
      height: calc(100vh - 205px);

      .title {
        margin-top: 40px;
      }

      .echart {
        width: 100%;
        height: 330px;
      }

      .timesel {
        width: 45px;
        height: 28px;
        border: 1px #eee solid;
        border-radius: 30px;
        display: flex;
        padding: 0px 2px;
        box-sizing: border-box;
        justify-content: space-between;
        float: right;
        margin-top: -70px;

        .timesel-item {
          width: 100%;
          height: 22px;
          line-height: 22px;
          text-align: center;
          margin-top: 2px;
          cursor: pointer;

          &.active {
            background: #838ae4;
            color: #ffffff;
            border-radius: 20px;
          }
        }
      }

      :deep .el-table {
        min-height: 320px;

        th.el-table__cell {
          background-color: #ECEDFF;
        }

        .el-table__inner-wrapper {
          min-height: 320px;
        }
      }
    }

    .lsider {
      width: 920px;
      height: calc(100vh - 205px);
      margin-right: 50px;

      .toolbar {
        width: 100%;
        height: 35px;

        :deep .el-form {
          .el-form-item {
            margin-right: 20px;
            float: left;
            margin-bottom: 10px;
          }

          .el-form-item__label {
            color: #656565;
          }
        }

        .btns {
          :deep .el-form-item__content {
            margin-left: 10px !important;
            margin-top: 4px;
          }
        }
      }

      .peopleCount {
        width: 100%;
        height: calc(100vh - 240px);

        .item-info {
          width: 500px;

          >div {
            margin-top: 10px;
          }
        }

        :deep .el-carousel__indicators {
          text-align: right;
          margin-top: -100px;
          height: 100px;

          .el-carousel__button {
            width: 10px;
            height: 10px;
            border-radius: 10px;
          }

          .is-active {
            .el-carousel__button {
              background: #838ae4;
            }
          }
        }

        .setArea {
          text-align: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
